<script setup>
import { ref } from 'vue'
import { Delete, Edit } from '@element-plus/icons-vue'
import {
  getArticalListService,
  addArticalService,
  getArticalInfo
} from '@/api/manager.js'
import { ElMessage, dayjs } from 'element-plus'
import { getArticalClass } from '@/api/artical.js'
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
const articalClass = await getArticalClass()
const articalClassList = articalClass.data.data
defineOptions({
  name: 'AdminManager'
})
const loading = ref(true)
const artical_content = ref()
const params = ref({
  pagenum: 1,
  pagesize: 5,
  cate_id: '',
  state: ''
})
const total = ref()
const getArtical = async () => {
  loading.value = true
  const res = await getArticalListService(params.value)
  artical_content.value = res.data.data
  total.value = res.data.total
  loading.value = false
}
getArtical()
const isEdit = ref(false)
loading.value = false
const onDeleteArtical = (data) => {
  console.log(data)
}
const onEditArtical = async (data) => {
  drawerVisble.value = true
  isEdit.value = true
  const res = await getArticalInfo(data.id)
  const context = res.data.data
  console.log(context)
  publishArtical.value.title = context.title
  publishArtical.value.cate_id = context.cate_id
  publishArtical.value.cover_img =
    'http://big-event-vue-api-t.itheima.net' + context.cover_img
  publishArtical.value.content = context.content
}
const search = async () => {
  loading.value = true
  const {
    data: { data }
  } = await getArticalListService(params.value)
  artical_content.value = data
  loading.value = false
}
const reset = () => {
  params.value.cate_id = ''
  params.value.state = ''
}

const drawerVisble = ref(false)
const publishArtical = ref({
  title: '',
  cate_id: '',
  content: '',
  cover_img: '',
  state: ''
})
const publishArticalRule = {
  title: [{ required: true, message: '请填写文章标题', trigger: 'blur' }],
  cate_id: [{ required: true, message: '请选择文章分类', trigger: 'blur' }],
  content: [{ required: true, message: '文章内容不能为空', trigger: 'blur' }],
  cover_img: [{ required: true, message: '请选择文章封面', trigger: 'blur' }]
}
const handlImg = (obj) => {
  publishArtical.value.cover_img = URL.createObjectURL(obj.raw)
}
const articalForm = ref()
const upload = async (state) => {
  await articalForm.value.validate()
  publishArtical.value.state = state
  addArticalService(publishArtical.value)
  ElMessage.success(state === '草稿' ? '保存成功' : '发布成功')
}
const quEditor = ref()
const add = () => {
  ;[drawerVisble.value, publishArtical.value, isEdit.value] = [
    true,
    {
      title: '',
      cate_id: '',
      content: '',
      cover_img: '',
      state: ''
    },
    false
  ]
  quEditor.value?.setHTML('')
}
</script>

<template>
  <div>
    <artical-content :header="'文章管理'">
      <template #extra>
        <el-button type="primary" @click="add">发布文章</el-button>
      </template>
      <template #content>
        <el-form :inline="true">
          <el-form-item label="文章分类：">
            <el-select placeholder="请选择" v-model="params.cate_id">
              <el-option
                v-for="item in articalClassList"
                :key="item.id"
                :value="item.id"
                :label="item.cate_name"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="发布状态：">
            <el-select v-model="params.state" placeholder="请选择">
              <el-option
                v-for="value in ['已发布', '草稿']"
                :label="value"
                :value="value"
                :key="value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button type="default" @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
        <el-table
          style="width: 100%"
          :data="artical_content"
          v-loading="loading"
        >
          <el-table-column label="文章标题">
            <template #default="{ row }">
              <el-link :underline="false" type="primary">
                {{ row.title }}
              </el-link>
            </template>
          </el-table-column>
          <el-table-column label="分类" prop="cate_name"></el-table-column>
          <el-table-column label="发表时间">
            <template #default="{ row }">
              {{ dayjs(row.pub_date).format('YYYY年MM月DD日') }}
            </template>
          </el-table-column>
          <el-table-column label="状态" prop="state"></el-table-column>
          <el-table-column label="操作" width="100">
            <template #default="{ row }">
              <el-button
                type="primary"
                :icon="Edit"
                @click="onEditArtical(row)"
                circle
              />
              <el-button
                type="danger"
                :icon="Delete"
                @click="onDeleteArtical(row)"
                circle
              />
            </template>
          </el-table-column>
          <template #empty>
            <el-empty description="没有数据"></el-empty>
          </template>
        </el-table>
        <el-pagination
          background
          v-model:current-page="params.pagenum"
          v-model:page-size="params.pagesize"
          :total="total"
          :pager-count="7"
          :page-sizes="[2, 3, 5, 10]"
          layout="jumper ,sizes,total, prev, pager, next"
          style="position: fixed; bottom: 40px; right: 40px"
          @size-change="getArtical()"
          @current-change="getArtical()"
        ></el-pagination>
      </template>
    </artical-content>
    <el-drawer
      v-model="drawerVisble"
      v-loading="loading"
      :title="isEdit ? '编辑文章' : '添加文章'"
      size="50%"
    >
      <el-form
        :model="publishArtical"
        :rules="publishArticalRule"
        ref="articalForm"
      >
        <el-form-item prop="title" label="文章标题">
          <el-input
            v-model="publishArtical.title"
            placeholder="请输入标题"
          ></el-input>
        </el-form-item>
        <el-form-item prop="cate_id" label="文章分类">
          <el-select v-model="publishArtical.cate_id">
            <el-option
              v-for="value in articalClassList"
              :key="value.id"
              :value="value.id"
              :label="value.cate_name"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="cover_img" label="文章封面">
          <el-upload
            :auto-upload="false"
            :show-file-list="false"
            :on-change="handlImg"
          >
            <img
              v-if="publishArtical.cover_img"
              :src="publishArtical.cover_img"
              width="200"
              height="200"
              draggable="false"
              alt=""
              style="border-radius: 10px"
            />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item prop="content" label="文章内容" style="height: 100%">
          <div class="content">
            <quill-editor
              theme="snow"
              content-type="html"
              v-model:content="publishArtical.content"
              ref="quEditor"
            ></quill-editor>
            <el-button type="primary" @click="upload('已发布')">发布</el-button>
            <el-button type="info" @click="upload('草稿')">草稿</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<style
  scoped
  lang="scss
"
>
.avatar-uploader-icon {
  width: 200px;
  height: 200px;
  border: 1px black dashed;
  transition:0.5s;
  &:hover{
    border: 1px deepskyblue dashed;
  }
}
.content{
  height:200px;
  width:100%;
}
</style>
